<template>
  <div class="box">
    <img src="../../public/images/login_bg.jpg" alt="" />
    <div class="login">
      <h3 class="tiele">登录</h3>
<!--      <ul>-->
<!--        <li>-->
<!--          <table>-->
<!--            账号-->
<!--          </table>-->
<!--          <input v-model.trim="name" type="text" class="name" />-->
<!--        </li>-->
<!--        <li>-->
<!--          <table>-->
<!--            密码-->
<!--          </table>-->
<!--          <input v-model.trim="password1" type="password" class="password" />-->
<!--        </li>-->
<!--        <li>-->
<!--          <table>-->
<!--            验证码-->
<!--          </table>-->
<!--          <input v-model.trim="yzm" type="text" class="rzm" />-->
<!--          <button class="Getbtn" @click="Getbtn">获取验证码</button>-->
<!--        </li>-->
<!--        <li>-->
<!--          &lt;!&ndash; <router-link to="/index"></router-link> &ndash;&gt;-->
<!--          <button class="button_login" @click="log">登录</button>-->
<!--        </li>-->
<!--        <li>-->
<!--&lt;!&ndash;          <a>没有账号?立即注册&ndash;&gt;-->
<!--            <router-link to="register">没有账号?立即注册</router-link>-->
<!--        </li>-->
<!--      </ul>-->
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px" size="medium" label-position="left" @keyup.enter.native="dataFormSubmit()">
        <el-form-item prop="name" label="账号">
          <el-input  v-model="dataForm.name"  placeholder="帐号" class="name"></el-input>
        </el-form-item>
        <el-form-item prop="password1" label="密码">
          <el-input  v-model="dataForm.password1" type="password" placeholder="密码" class="password"></el-input>
        </el-form-item>
<!--        <el-form-item prop="captcha" label="验证码">-->
<!--          <el-input  v-model="dataForm.captcha" placeholder="验证码" class="captcha"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item prop="captcha" label="验证码">
          <el-row>
            <el-col :span="14">
              <el-input v-model="dataForm.captcha" placeholder="验证码" >
              </el-input>
            </el-col>
            <el-col :span="10" class="login-captcha">
              <img :src="captchaPath" @click="getCaptcha()" alt="">
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button class="button_login" @click="dataFormSubmit()">登录</el-button>
        </el-form-item>
      </el-form>
      <span>没有账户?<router-link to="register">立即注册</router-link></span>
    </div>
  </div>
</template>

<script>
// import axios from 'axios';
import { login } from "@/utils/data";
export default {
  name: "MyLogin",
  data() {
    return {
      dataForm:{
        name: "",
        password1: "",
        captcha:""
      },
      dataRule: {
        name: [
          { required: true, message: '帐号不能为空', trigger: 'blur' }
        ],
        password1: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        captcha: [
          { required: true, message: '验证码不能为空', trigger: 'blur' }
        ]
      },
      captchaPath: '',
      showModal: false,
      text: "",
    };
  },
  created () {
    this.getCaptcha()
  },
  methods: {
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          login({
            'username': this.dataForm.name,
            'password': this.dataForm.password1,
            'po': "11"
          }).then((res) => {
            console.log(res);
          }).catch(error=>{
            console.log(error)
          });
        }
      })
    },
    getCaptcha(){
      // this.dataForm.uuid = this.uuid()
      // this.captchaPath = `http://127.0.0.1:3000/captcha/${this.dataForm.uuid}`
    }
  },
};
</script>

<style scoped lang="less">
.box {
  position: relative;
  width: 100%;
}
.box > img {
  width: 100%;
  height: 100vh;
  display: block;
}
.login {
  width: 500px;
  background-color: #ffffffc2;
  position: absolute;
  right: 10%;
  top: 20%;
  border-radius: 10px;
}
.tiele {
  text-align: center;
  width: 100%;
  height: 50px;
  font-size: 26px;
  line-height: 50px;
  border-bottom: 1px solid black;
}
/deep/ .el-form-item{
  margin-left: 20px;
  width: 400px;
  margin-top: 20px;
}
.button_login {
  width: 320px;
  //margin-left: 10px;
  //font-size: 16px;
  background-color: #fff;
  border: 1px solid #ccc;
}
span{
  width: 100%;
  display: inline-block;
  text-align: center;
  color: #777;
  margin-bottom: 10px;
}
a:hover {
  color: red;
}
footer {
  display: none;
}
.captcha {
  width: 220px;
}
//.Getbtn {
//  height: 30px;
//  width: 80px;
//  background-color: #fff;
//  border: none;
//}
</style>
